<template>
	<view class="main-page">
		<view class="header-box">
			<view class="title-box">
				<image class="back-ic" src="../../static/common/ic_back_white.png" @click="goBack"></image>
				<text class="font-fff-36 font-weight-600">{{title}}</text>
			</view>
			<view class="data-box">
				<view class="column-container-center width-33p">
					<text class="font-fff-32 font-weight-600">{{detailData.price}}</text>
					<text class="font-fff-26 mt-18">金额(元)</text>
				</view>
				<!-- <view class="column-container-center width-25p">
					<text class="font-fff-32 font-weight-600">{{detailData.expireTimeBak}}</text>
					<text class="font-fff-26 mt-18">有效期</text>
				</view> -->
				<view class="column-container-center width-33p">
					<text class="font-fff-32 font-weight-600">{{detailData.totalCount}}</text>
					<text class="font-fff-26 mt-18">总次数</text>
				</view>
				<view class="column-container-center width-33p">
					<text class="font-fff-32 font-weight-600">{{detailData.totalCount - detailData.writeOffCount}}</text>
					<text class="font-fff-26 mt-18">剩余次数</text>
				</view>
			</view>
			
			<view class="card-box">
				<text class="card-text">开卡时间：{{detailData.startTime}}</text>
				<text class="card-text">有效期至：{{detailData.expireTime}}</text>
			</view>
			
		</view>
		<view class="consume-box">
			<view class="row-container-row-between width-100p height-88">
				<view class="row-container" style="position: relative;">
					<view class="flag"></view>
					<text class="font-333-28 font-weight-600" style="z-index: 50;">消费记录</text>
				</view>
			</view>
			<view class="column-container width-100p" v-if="dataList.length > 0">
				<view class="consume-item"
				 v-for="(item , index) in dataList" :key="index">
					<view class="column-container">
						<view class="row-container">
							<text class="font-333-28 font-weight-600">{{item.addTime}}</text>
							<text class="font-333-28 font-weight-600 ml-50">{{item.staffName}}</text>
						</view>
						<text class="font-999-24 mt-8" v-if="item.remarks">备注：{{item.remarks}}</text>
					</view>
					<view class="row-container">
						<image class="wh-38 mr-50" src="../../static/common/ic_edit_black.png" 
						@click="handleChangeConsume(item)"></image>
						<image class="wh-38" src="../../static/common/ic_delete.png" 
						@click="handleClickDelete(item)"></image>
					</view>
				</view>
			</view>
			<NoData v-else hint="暂无消费记录" class="width-100p"></NoData>
		</view>
		
		<view class="bottom-box">
			<view class="column-container-center ml-42" @click="showEditServiceWindow = true">
				<image class="wh-38" src="../../static/common/ic_edit_black.png"></image>
				<text class="font-333-22 font-weight-600 mt-8">编辑</text>
			</view>
			<view class="column-container-center ml-42 mr-42" @click="showDeleteServiceWindow = true">
				<image class="wh-38" src="../../static/common/ic_delete.png"></image>
				<text class="font-333-22 font-weight-600 mt-8">删除</text>
			</view>
			
			<view class="add-btn-box" @click="handleClickCheck">
				<text class="font-fff-32 font-weight-600">核销一次</text>
			</view>
		</view>
		
		<view class="window-main" style="justify-content: flex-end;" v-if="showCheckWindow">
			<view class="check-window">
				<text class="font-333-36 font-weight-600">{{editRecordId ? "修改消费记录" : "确认核销一次吗？"}} </text>
				<view class="check-info-box">
					<view class="row-container-row-between width-100p">
						<text class="font-987658-28">编号</text>
						<text class="font-745-28 font-weight-600">{{detailData.custom.id}}</text>
					</view>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">姓名</text>
						<text class="font-745-28 font-weight-600">{{detailData.custom.realName}}</text>
					</view>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">性别</text>
						<text class="font-745-28 font-weight-600" v-if="detailData.custom.sex == 1">男</text>
						<text class="font-745-28 font-weight-600" v-else>女</text>
					</view>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">电话</text>
						<text class="font-745-28 font-weight-600">{{detailData.custom.mobile}}</text>
					</view>
					<image class="check-divider" src="../../static/common/ic_check_divider.png"></image>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">服务项目</text>
						<text class="font-745-28 font-weight-600">{{detailData.categoryName}} - {{detailData.name}}</text>
					</view>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">金额(元)</text>
						<text class="font-745-28 font-weight-600">{{detailData.price}}</text>
					</view>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">开卡日期</text>
						<text class="font-745-28 font-weight-600">{{detailData.startTime}}</text>
					</view>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">有效期</text>
						<text class="font-745-28 font-weight-600">{{detailData.expireTime}}</text>
					</view>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">总次数</text>
						<text class="font-745-28 font-weight-600">{{detailData.totalCount}}次</text>
					</view>
					<view class="row-container-row-between width-100p mt-20">
						<text class="font-987658-28">剩余次数</text>
						<text class="font-745-28 font-weight-600">{{detailData.totalCount - detailData.writeOffCount}}次</text>
					</view>
				</view>
				
				<view class="row-container mt-20 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">操作员</text>
				</view>
				<picker mode="selector" :range="allEmployeeList" range-key="userName"
				class="width-100p mt-14" @change="changeStaff" v-model="staffId" :disabled="checkBoss != 0">
					<view class="row-container-row-between choose-time-box">
						<text class="font-999-28" v-if="!staffName">请选择关联的店员</text>
						<text class="font-333-28" v-if="staffName">{{staffName}}</text>
						<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
					</view>
				</picker>
				
				<text class="font-f94-24 mt-8 width-100p">请选择本次服务的操作员，关系到员工绩效数据</text>
				
				<view class="row-container mt-20 width-100p">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">核销时间</text>
				</view>
				<view class="row-container mt-14 width-100p" >
					<uni-datetime-picker
						type="datetime"
						v-model="checkTime"
						@change="changeCheckTime"
						:border="false"
					>
						<view class="choose-time-box">
							<text class="font-333-28">{{checkTime ? checkTime :'请选择核销时间'}}</text>
							<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
						</view>
					</uni-datetime-picker>
				</view>
				
				<view class="row-container mt-20 width-100p">
					<text class="font-333-28">备注信息</text>
				</view>
				<input 
					class="input-box"
					v-model="remarks"
					placeholder="请输入核销备注"
					placeholder-class="font-999-28"
				/>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="check-cancel" @click="handleClickCancelCheck">取消</text>
					<text class="check-confirm" @click="handleConfirmCheck">确定</text>
				</view>
			</view>
		</view>
		
		<view class="window-main" v-show="showDeleteWindow">
			<view class="delete-window">
				<text class="font-333-36 font-weight-600">确认删除该核销记录吗？</text>
				<text class="font-666-28 mt-20" style="text-align: center;">删除后该核销记录后，相关操作员的本次绩效也将清除</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-btn" @click="showDeleteWindow = false">取消</text>
					<text class="confirm-btn" @click="handleConfirmDelete">确定</text>
				</view>
			</view>
		</view>
		
		<view class="window-main" v-show="showDeleteServiceWindow">
			<view class="delete-window">
				<text class="font-333-36 font-weight-600">确认删除该服务项？</text>
				<text class="font-666-28 mt-20" style="text-align: center;">删除后服务项及该项目内的消费记录将无法恢复，请您谨慎操作！</text>
				<view class="row-container mt-40 width-100p">
					<text class="cancel-btn" @click="showDeleteServiceWindow = false">取消</text>
					<text class="confirm-btn" @click="handleDeleteService">确定</text>
				</view>
			</view>
		</view>
		
		<!-- 修改服务项弹窗 -->
		<view class="window-main" style="justify-content: flex-end;" v-if="showEditServiceWindow">
			<view class="edit-service-window">
				<text class="font-333-36 font-weight-600">服务项目修改</text>
				<view class="row-container width-100p mt-40">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">大类</text>
				</view>
				
				<view class="row-container-row-between input-box">
					<text class="font-333-28">{{detailData.categoryName}}</text>
				</view>
				
				<view class="row-container width-100p mt-20">
					<text class="font-f94-28">*</text>
					<text class="font-333-28">项目</text>
				</view>
				<view class="row-container-row-between input-box">
					<text class="font-333-28">{{addParams.name}}</text>
				</view>
				
				<view class="row-container-row-between width-100p mt-20">
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">总次数</text>
						</view>
						<input
							v-model="addParams.totalCount"
							class="input-box mr-10"
							placeholder="请输入数量"
							type="number"
							placeholder-class="font-999-28"
							@input="changeTotalCount"
						/>
					</view>
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">金额</text>
						</view>
						<input
							v-model="addParams.price"
							class="input-box"
							placeholder="请输入金额"
							placeholder-class="font-999-28"
						/>
					</view>
				</view>
				
				<view class="row-container-row-between width-100p mt-20">
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">开卡时间</text>
						</view>
						<picker mode="date" v-model="addParams.startTime" class="width-100p"
						 @change="changeOpenTime">
							<view class="row-container-row-between input-box">
								<text class="font-333-28" v-if="addParams.startTime">{{addParams.startTime}}</text>
								<text class="font-999-28" v-else>请选择日期</text>
								<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
							</view>
						</picker>
					</view>
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">有效至</text>
						</view>
						<picker mode="date" v-model="addParams.expireTime" class="width-100p" 
						@change="changeDate">
							<view class="row-container-row-between input-box">
								<text class="font-333-28" v-if="addParams.expireTime">{{addParams.expireTime}}</text>
								<text class="font-999-28" v-else>请选择日期</text>
								<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
							</view>
						</picker>
					</view>
				</view>
				
				<view class="row-container-row-between width-100p mt-20">
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">开卡人</text>
						</view>
						<picker mode="selector" :range="allEmployeeList" range-key="userName"
						class="width-100p" @change="changeOpenCardStaff" :disabled="checkBoss != 0">
							<view class="row-container-row-between input-box">
								<text class="font-333-28" v-if="openCardStaffName">{{openCardStaffName}}</text>
								<text class="font-999-28" v-else>请选择开卡人</text>
								<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
							</view>
						</picker>
					</view>
					<view class="column-container width-half">
						<view class="row-container mt-20">
							<text class="font-f94-28">*</text>
							<text class="font-333-28">标签</text>
						</view>
						<picker mode="selector" :range="chargeList" range-key="label"
						class="width-100p" @change="changeChargeType">
							<view class="row-container-row-between input-box">
								<text class="font-333-28" v-if="chargeTypeLabel">{{chargeTypeLabel}}</text>
								<text class="font-999-28" v-else>请选择标签</text>
								<image class="wh-20" src="../../static/common/ic_arrow_right.png"></image>
							</view>
						</picker>
					</view>
				</view>
				
				<view class="row-container-row-between width-100p mt-40">
					<text class="edit-cancel" @click="showEditServiceWindow = false">取消</text>
					<text v-if="addParams.name && addParams.price && addParams.totalCount 
					&& addParams.expireTime && addParams.startTime"
					 class="edit-confirm" style="background: #F94C4B;"
						@click="handleEditService">确认修改</text>
					<text v-else class="edit-confirm">确认修改</text>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	import NoData from '../../components/nodata.vue'
	import constant from '../../utils/constant.js'
	
	export default {
		data() {
			return {
				itemId:'' ,
				detailData:{} , //详情
				
				checkBoss : -1 , // 0为店长  其他为店员
				
				addParams:{
					id:'',
					type:'', // 收费类型  0收费  1体验  2赠送  3活动
					name:'',  //选择的服务项的名称
					price:'',
					expireTime:'',
					totalCount:'',
					customId:'',
					startTime:'',
					itemId:''  ,// 选择的服务项的id
					staffId:'' , // 选择的开卡人id
				},  //修改服务项的数据
				
				childPrice:'' , // 已选择的子服务项的单价
				
				title:'详情',
				showCheckWindow:false,
				dataList:[],
				showDeleteWindow:false,
				
				delelteData:null,
				page:1,
				hasMoreData:false,
				
				showDeleteServiceWindow:false,
				showEditServiceWindow:false,
				allServiceList:[] , // 全部服务项
				
				
				editRecordId:'',
				allEmployeeList:[] , // 全部员工列表
				staffId:'' , // 关联的店员id 类型为0的时候必传
				staffName:'' , // 关联的店员名称
				checkTime:'' , // 核销时间
				remarks:'' , // 核销时的备注
				
				openCardStaffName:'' , // 选择的开卡人姓名
				
				chargeList:[{'value' : 0 , 'label' : '收费'} , 
				{'value' : 1 , 'label' : '体验'} ,
				{'value' : 2 , 'label' : '赠送'} ,
				{'value' : 3 , 'label' : '活动'}],
				chargeTypeLabel:'' , //选择的收费类型名称
			}
		},
		
		components:{
			NoData
		},
		
		onLoad(options) {
			this.checkBoss = this.cookie.get("ap_user_data").checkBoss
			
			//不为0  店员
			if (this.checkBoss != 0){
				this.staffId = this.cookie.get('ap_user_data').id
				this.staffName = this.cookie.get('ap_user_data').userName
			} else{
				this.loadAllEmployee()
			}
			
			this.loadAllServiceList()
			if (options.itemId){
				this.itemId = options.itemId
				this.loadServiceDetail()
				this.loadDataList()
			}
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadDataList()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadDataList()
			}
		},
		
		methods: {
			goBack(){
				uni.navigateBack()
			},
			
			loadAllEmployee(){
				let that = this
				this.http({
					url:'/user/staffList',
					method:'POST',
					data:{
						pageNo: 1,
						pageSize: 1000,
						status:1
					},
					success(res){
						if (res.code == 200){
							that.allEmployeeList = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			loadAllServiceList(){
				let that = this
				this.http({
					url:'/user/item/findServiceItemList',
					method:'POST',
					data:{
						'status':0
					},
					success(res){
						if (res.code == 200){
							that.allServiceList = res.data
						}
					},
					failed(e){
					}
				})
			},
			
			//点击核销  显示核销弹窗
			handleClickCheck(){
				if (!this.utils.checkAuthority(constant.auth_service_verification)){
					return
				}
				
				
				this.checkTime = this.getCurrentTimeStr()
				
				if (this.checkBoss != 0){
					this.staffId = this.cookie.get('ap_user_data').id
					this.staffName = this.cookie.get('ap_user_data').userName
				}
				
				this.showCheckWindow = true
			},
			
			changeDate(e){
				this.addParams.expireTime = e.detail.value
			},
			
			changeOpenTime(e){
				this.addParams.startTime = e.detail.value
			},
			
			changeTotalCount(e){
				this.addParams.totalCount = e.detail.value
				if (this.childPrice && this.addParams.totalCount){
					this.addParams.price = this.childPrice * this.addParams.totalCount
				} else{
					this.addParams.price = "0"
				}
			},
			
			//修改开卡人
			changeOpenCardStaff(e){
				this.addParams.staffId = this.allEmployeeList[e.detail.value].id
				this.openCardStaffName = this.allEmployeeList[e.detail.value].userName
			},
			
			loadServiceDetail(){
				if (!this.itemId) return
				
				let that = this
				this.http({
					url:'/user/item/findDetail',
					method:'POST',
					data:{
						itemId:this.itemId
					},
					success(res){
						if (res.code == 200){
							that.detailData = res.data
							that.addParams.name = res.data.name
							that.addParams.customId = res.data.customId
							that.addParams.expireTime = res.data.expireTime
							that.addParams.id = res.data.id
							that.childPrice = res.data.itemPrice
							that.addParams.totalCount = res.data.totalCount
							that.addParams.startTime = res.data.startTime
							that.addParams.itemId = res.data.itemId
							that.addParams.price = res.data.price
							that.addParams.staffId = res.data.staffId
							that.openCardStaffName = res.data.staffName
							that.addParams.type = res.data.type
							that.title = res.data.categoryName + " - " + res.data.name
							if (that.addParams.type == 0){
								that.chargeTypeLabel = '收费'
							} else if (that.addParams.type == 1){
								that.chargeTypeLabel = '体验'
							} else if (that.addParams.type == 2){
								that.chargeTypeLabel = '赠送'
							} else if (that.addParams.type == 3){
								that.chargeTypeLabel = '活动'
							}
						}
					},
					failed(e){
					}
				})
			},
			
			loadDataList(){
				let that = this
				this.http({
					url:'/user/writeoff/findList',
					method:'POST',
					data:{
						itemId : that.itemId,
						pageNo:that.page,
						pageSize:20
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.dataList = res.data
							} else{
								that.dataList = [...that.dataList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 10
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			},
			
			changeCheckTime(e){
				this.checkTime = e
			},
			
			//修改核销关联的店员
			changeStaff(e){
				this.staffId = this.allEmployeeList[e.detail.value].id
				this.staffName = this.allEmployeeList[e.detail.value].userName
			},
			
			//修改收费类型
			changeChargeType(e){
				this.addParams.type = this.chargeList[e.detail.value].value
				this.chargeTypeLabel = this.chargeList[e.detail.value].label
			},
			
			//确认核销
			handleConfirmCheck(){
				if (!this.staffId){
					uni.showToast({
						title:'请选择操作员',
						icon:'none'
					})
					return
				}
				
				let that = this
				this.http({
					url:'/user/writeoff/saveShopCustomWriteOff',
					method:'POST',
					data:{
						itemId : that.itemId,
						addTime : that.checkTime,
						staffId : that.staffId,
						writeOffId: that.editRecordId,
						remarks:that.remarks
					},
					success(res){
						if (res.code == 200){
							that.handleClickCancelCheck()
							that.page = 1
							that.loadDataList()
							that.loadServiceDetail()
							uni.$emit('refreshServiceList')
							uni.$emit('refreshClientList')
						} else{
							setTimeout(()=>{
								uni.showToast({
									title:res.msg,
									icon:'none'
								})
							} , 500)
						}
					},
					failed(e){
					}
				})
			},
			
			//关闭核销弹窗
			handleClickCancelCheck(){
				this.staffId = ""
				this.staffName = ""
				this.editRecordId = ""
				this.checkTime = ""
				this.remarks = ""
				this.showCheckWindow = false
			},
			
			handleClickDelete(item){
				this.delelteData = item
				this.showDeleteWindow = true
			},
			
			//修改消费记录
			handleChangeConsume(item){
				this.checkTime = item.addTime
				this.editRecordId = item.id
				this.staffId = item.staffId
				this.staffName = item.staffName
				this.remarks = item.remarks
				this.showCheckWindow = true
			},
			
			//删除消费记录
			handleConfirmDelete(){
				if (!this.delelteData) return
				let that = this
				this.http({
					url:'/user/writeoff/deleteWriteOff',
					method:'POST',
					data:{
						writeOffId  : that.delelteData.id,
					},
					success(res){
						if (res.code == 200){
							that.showDeleteWindow = false
							that.page = 1
							that.loadDataList()
							that.loadServiceDetail()
							uni.$emit('refreshServiceList')
						}
					},
					failed(e){
					}
				})
			},

			//删除服务项
			handleDeleteService(){
				if (!this.itemId) return
				let that = this
				this.http({
					url:'/user/item/removeServiceItem',
					method:'POST',
					data:{
						itemId  : that.itemId,
					},
					success(res){
						if (res.code == 200){
							that.showDeleteServiceWindow = false
							uni.$emit('refreshServiceList')
							uni.navigateBack()
						}
					},
					failed(e){
					}
				})
			},
			
			//修改服务
			handleEditService(){
				let that = this
				this.http({
					url:'/user/item/saveOrUpdateCustomServiceItem',
					method:'POST',
					header:{
						"content-type": "application/json",
						'Authorization': uni.getStorageSync("ap_token")
					},
					data:this.addParams,
					success(res){
						if (res.code == 200){
							that.showEditServiceWindow = false
							uni.$emit('refreshServiceList')
							that.loadServiceDetail()
						}
					},
					failed(e){
					}
				})
			},
			
			getCurrentTimeStr(){
				let date = new Date();
				let year = date.getFullYear()
				let month = date.getMonth() + 1;//当前月份
				let day = date.getDate();//天
				let hours = date.getHours();//小时
				let minute = date.getMinutes();//分
				let second = date.getSeconds();//秒
				let timeStr = year + "-" + month + "-" + day + " " + hours + ':' + minute + ":" + second
				return timeStr
			}
		}
	}
</script>

<style lang="scss">
	.header-box{
		width: 100%;
		height: 420rpx;
		background: linear-gradient(244.03deg, #EA3D3D 21.29%, #FF6B6B 94%);
		display: flex;
		flex-direction: column;
		position: fixed;
		align-items: center;
		z-index: 90;
		
		.title-box{
			display: flex;
			flex-direction: row;
			position: relative;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 88rpx; 
			margin-top: 88rpx;
			
			.back-ic{
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				left: 22rpx;
			}
		}
		
		.data-box{
			display: flex;
			flex-direction: row;
			width: calc(100% - 40rpx);
			margin-top: 38rpx;
		}
		
		.card-box{
			background: linear-gradient(360deg, #1D0E0E 0%, #321B1B 100%);
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 108rpx);
			height: 80rpx;
			position: absolute;
			bottom: 0rpx;
			border-top-left-radius: 16rpx;
			border-top-right-radius: 16rpx;
			padding: 0rpx 24rpx;
			
			.card-text{
				color: rgba(255, 255, 255, 0.6);
				font-size: 26rpx;
			}
		}
		
	}
	
	.consume-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 60rpx);
		padding: 0rpx 30rpx;
		margin-top: 420rpx;
		margin-bottom: 140rpx;
		
		.flag{
			width: 144rpx;
			height: 10rpx;
			position: absolute;
			bottom: 0rpx;
			background: linear-gradient(79.95deg, #EA3D3D 7.53%, rgba(234, 61, 61, 0) 92.47%);
		}
		
		.divider{
			width: 100%;
			height: 1rpx;
			background: #E8E8E8;
		}
		
		.consume-item{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 48rpx);
			background: white;
			margin-bottom: 20rpx;
			padding: 24rpx;
			border-radius: 16rpx;
		}
	}
	
	.bottom-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		height: 120rpx;
		background: white;
		position: fixed;
		bottom: 0rpx;
		
		.add-btn-box{
			background: #F94C4B;
			flex-grow: 1;
			margin-right: 30rpx;
			height: 88rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
	}
	
	.check-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 80rpx);
		padding: 40rpx;
		background: white;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		
		.check-info-box{
			display: flex;
			flex-direction: column;
			width: calc(100% - 28rpx);
			padding: 14rpx;
			background: #FFFCEA;
			border: 1px dotted #DCCCBF;
			border-radius: 10rpx;
			margin-top: 40rpx;
			
			.check-divider{
				width: 100%;
				height: 1rpx;
				margin-top: 20rpx;
			}
		}
		
		.choose-time-box{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 48rpx);
			height: 88rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			padding: 0rpx 24rpx;
		}
		
		.check-cancel{
			width: 200rpx;
			height: 85rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
			background: #F5F5F5;
			line-height: 85rpx;
			text-align: center;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.check-confirm{
			height: 85rpx;
			flex-grow: 1;
			border-radius: 10rpx;
			background: #F94C4B;
			line-height: 85rpx;
			text-align: center;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
		}
		
	}
	
	.delete-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 190rpx);
		margin: 0rpx 70rpx;
		padding: 40rpx 25rpx;
		background: white;
		border-radius: 30rpx;
		
		.cancel-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F5F5F5;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: #333333;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
		
		.confirm-btn{
			height: 85rpx;
			flex-grow: 1;
			background: #F94C4B;
			border-radius: 10rpx;
			margin: 0rpx 15rpx;
			color: white;
			font-size: 32rpx;
			text-align: center;
			line-height: 85rpx;
		}
	}
	
	.input-box{
		width: calc(100% - 48rpx);
		height: 88rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
		margin-top: 14rpx;
		padding: 0rpx 24rpx;
		color: #333333;
		font-size: 28rpx;
	}
	
	.edit-service-window{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: calc(100% - 60rpx);
		padding: 40rpx 30rpx;
		background: white;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		
		.width-half{
			width: calc(50% - 10rpx);
		}
		
		.edit-cancel{
			width: 200rpx;
			height: 85rpx;
			margin-right: 30rpx;
			border-radius: 10rpx;
			background: #F5F5F5;
			line-height: 85rpx;
			text-align: center;
			color: #333333;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		.edit-confirm{
			height: 85rpx;
			flex-grow: 1;
			border-radius: 10rpx;
			background: rgba(249, 76, 75, 0.5);
			line-height: 85rpx;
			text-align: center;
			color: white;
			font-size: 32rpx;
			font-weight: 600;
		}
		
		
	}
	
</style>
